<template>
  <div class="userfile-container">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="个人信息"
      left-arrow
      class="page-nav-bar"
      @click-left="$router.back()"
    />
    <!--上传控件-->
    <input type="file" hidden ref="file" @change="onFileChange">
    <!-- 内容区域 -->
    <van-cell title="头像" is-link class="photo-cell" @click="$refs.file.click()">
      <template #default>
        <van-image
          class="avatar"
          round
          fit="cover"
          :src="userInfo.photo"
        />
      </template>
    </van-cell>
    <van-cell title="昵称" is-link :value="userInfo.name" @click="isNameShow=true"/>
    <van-cell title="性别" is-link :value="userInfo.gender===0?'男':'女'" @click="isGenderShow=true"/>
    <van-cell title="生日" is-link :value="userInfo.birthday" @click="isBirthdayShow=true"/>
    <!-- 头像弹框==================================================================== -->
    <van-popup v-model="isPhotoShow" position="bottom" :style="{height:'100%'}">
      <AvatarEdit
        v-if="isPhotoShow"
        :img="img"
        @close="isPhotoShow = false"
        :avatar.sync="userInfo.photo"
      ></AvatarEdit>
    </van-popup>
    <!-- 昵称弹框==================================================================== -->
    <van-popup v-model="isNameShow" position="bottom" :style="{height:'100%'}">
      <NameEdit
        v-if="isNameShow"
        :userName.sync="userInfo.name"
        @close="isNameShow = false"
      ></NameEdit>
    </van-popup>
    <!-- 性别弹框==================================================================== -->
    <van-popup v-model="isGenderShow" position="bottom" :style="{height:'60%'}">
      <GenderEdit
        v-if="isGenderShow"
        :userGender.sync="userInfo.gender"
        @close="isGenderShow = false"
      ></GenderEdit>
    </van-popup>
    <!-- 生日弹框==================================================================== -->
    <van-popup v-model="isBirthdayShow" position="bottom" :style="{height:'60%'}">
      <BirthdayEdit
        v-if="isBirthdayShow"
        :userBirthday.sync="userInfo.birthday"
        @close="isBirthdayShow = false"
      ></BirthdayEdit>
    </van-popup>
  </div>
</template>

<script>
import { getUserProFileAPI } from '../../api/index.js'
import AvatarEdit from './components/avatar-edit.vue'
import NameEdit from './components/name-edit.vue'
import GenderEdit from './components/gender-edit.vue'
import BirthdayEdit from './components/birthday-edit.vue'

export default {
  name: 'UserFileIndex',
  components: {
    AvatarEdit,
    NameEdit,
    GenderEdit,
    BirthdayEdit
  },
  data () {
    return {
      userInfo: {},
      isPhotoShow: false, // 头像弹框状态
      isNameShow: false, // 昵称弹框状态
      isGenderShow: false, // 性别弹框状态
      isBirthdayShow: false, // 生日弹框状态
      img: null
    }
  },
  created () {
    // 调用获取用户个人资料的方法
    this.loadGetUserProFile()
  },
  methods: {
    // 获取用户个人资料
    async loadGetUserProFile () {
      try {
        const { data: res } = await getUserProFileAPI()
        console.log(res)
        this.userInfo = res.data
      } catch (err) {
        console.log(err)
      }
    },
    // 上传图片完成后
    onFileChange () {
      // 1. 将输入框中的图片存储到数据中
      const file = this.$refs.file.files[0]
      // 2. 基于文件对象转化为blob数据
      this.img = window.URL.createObjectURL(file)
      // console.log(typeof this.img) ==> string
      // 3. 每次完成后 获取图片后 要清空文件上传中的数据
      this.$refs.file.value = ''
      // 开启弹框
      this.isPhotoShow = true
    }
  }
}
</script>

<style scoped lang="less">
.userfile-container {
  .photo-cell {
    align-items: center;

    .avatar {
      width: 30px;
      height: 30px;
    }

    .van-cell__value {
      display: flex;
      flex-direction: row-reverse;
    }
  }
}
</style>
